   <template>
	<div>
		<div class="header">
			<h3>找回密码<router-link to="/Home">返回首页</router-link><span class="shu">|</span><router-link to="/Entry">帮助中心</router-link></h3>

		</div>
		<div class="content">
			<div class="login displayBlock">
				<h4>请输入您注册时的手机号</h4>
				<p class="username"><input type="text" v-model="number1" placeholder="请输入手机号" @blur="judgename()" ref="number1"></input></p>

				<h4>请输入验证码</h4>
				<p class="passwords">
					<input type="text" class="code" v-model="code" placeholder=""  ref="code"></input><button class="codes" @click="Verification ($event)">获取验证码</button>
				</p>

				<p class="entry"><button class="submit" @click="next1()">下一步</button></p>

			</div>
			<div class="login2">
				<h4>请设置新的密码</h4>
				<p class="username"><input type="password" v-model="passwords" placeholder="6-18个字符，可使用字母 ,数字,下划线" @blur="changepassword()" ref="passwords"></input></p>

				<h4>请再次输入密码</h4>
				<p class="username"><input type="password" placeholder="密码" ref="passwords2" v-model="passwords2"  @blur="changeCount()"/></p>
				<p class="agains">两次密码输入一致</p>
				<p class="entry"><button class="submit" @click="next2()">下一步</button></p>

			</div>
			<div class="login3">
				<h4 class="three3">密码设置成功，可重新登录</h4>
				<p class="entry"><router-link to="/Entry"><button class="submit">登录</button></router-link></p>

			</div>
		</div>
		<ul class="list">
			<li>100%正品</li>
			<li>双重质检</li>
			<li>全球化采购</li>
			<li>无理由退货</li>
			<li>贵就赔</li>
			<li>万千口碑</li>
		</ul>
		<Footers></Footers>
	</div>
</template>

<script>
import Footers from'@/components/Footers'

	export default{
		data(){
			return{
				number1: '',
				passwords:'',
				code:'',
				passwords2:'',
				time:'60',
				numberO:true,
				passwordO:true,
				passwordsO:true,

			}
		},
		 created: function () {

               clearTimeout(window.the_timeout2);

          },

          components:{
		      Footers,

		    },
		methods: {
		   judgename:function(){


		         var Expression=/^1[34578]\d{9}$/;
	 			var objExp=new RegExp(Expression);
		       if(this.$refs.number1.value==""){
		        		this.$alert('手机号码不能为空', '', {
					          confirmButtonText: '确定',
					         });
					    this.numberO=false
		        }else if(objExp.test(this.$refs.number1.value)==false){
		        			this.$alert('手机号码格式不正确', '', {
					          confirmButtonText: '确定',
					         });
		        	this.numberO=false

		        }else{
		        	this.numberO=true
		        }
//		        console.log(this.numberO)


		  },
		   Verification:function(e){

		  	if(this.time==0){
		  	  $(".codes").text("获取验证码")
		  	  e.target.disabled = false;
		  	  this.time=60
//		  	  console.log( this.time)
		  	}else{
		  		$(".codes").text(this.time+"秒")
				e.target.disabled = true;
		  		this.time--;
		  		var that= this
		  		window.the_timeout2=setTimeout(function(){

		  			that.Verification(e)
		  		},1000)
		  	}
		  },
		   next1:function(){

				 if(this.numberO==true){

				 	 this.$http({
		                    method:'GET',
		                    url:local2+'/expertsDetails.do?id=44',
		                    data:{'websiteId':2},

		                    emulateJSON: true

			            }).then(function(data){


			            		$(".login").removeClass("displayBlock")
						  		$(".login2").addClass("displayBlock")


			            },function(error){
			              	this.$alert('验证码错误', '', {
					          confirmButtonText: '确定',
					         });


			      })
				 }else{
				 	this.$alert('请填写完整信息', '', {
					          confirmButtonText: '确定',
					         });
				 }


		  },
		  changepassword: function() {
		         var Expression = /^[0-9a-zA-Z_]{6,18}$/ ;
	             var objExp=new RegExp(Expression);

				if(this.$refs.passwords.value==""){
					this.$alert('密码不能为空', '', {
					          confirmButtonText: '确定',
					         });
					    this.passwordO=false
				}else if(objExp.test(this.$refs.passwords.value)==false){
		        	this.$alert('密码格式不正确', '', {
					          confirmButtonText: '确定',
					         });

		        	this.passwordO=false
		        }else{

		        	this.passwordO=true
		        }

		    },
		    changeCount: function() {
		        if(this.$refs.passwords2.value!=this.passwords){
		        	$(".agains").removeClass("displayBlock")
		        	this.$alert('两次密码不一致', '', {
					          confirmButtonText: '确定',
					         });
		        	this.passwordsO=false
		        }else if(this.$refs.passwords2.value==""){
		        	$(".agains").removeClass("displayBlock")
		        	this.$alert('确认密码不能为空', '', {
					          confirmButtonText: '确定',
					         });

		        	this.passwordsO=false
		        }else{

		        	$(".agains").addClass("displayBlock")
		        	this.passwordsO=true
		        }

		    },

		  next2:function(){

				 if(this.passwordO==true&&this.passwordsO==true){

				 	 this.$http({
		                    method:'GET',
		                    url:local2+'/expertsDetails.do?id=44',
		                    data:{'websiteId':2},

		                    emulateJSON: true

			            }).then(function(data){


			            		$(".login2").removeClass("displayBlock")
						  		$(".login3").addClass("displayBlock")


			            },function(error){
			              	this.$alert('kkk', '', {
					          confirmButtonText: '确定',
					         });


			      })
				 }else{
				 	this.$alert('请填写完整信息', '', {
					          confirmButtonText: '确定',
					         });
				 }


		  },




		}
	}
</script>

<style scoped>

.header{
	width:1060px;
	height:120px;
	margin:0 auto;
	background:url(../assets/logo.png) no-repeat 8px;
}
.header h3{
	height:120px;
	line-height:120px;
	font-size:21px;
	text-align: left;
	margin-left:220px;

}
.header h3 a:nth-child(1){
	display:inline-block;
	font-size:14px;
	text-indent:570px;
	width:640px;
	font-weight:100;
	color:#333;

}
.header h3 span{
	font-size:16px;
	font-weight:100;
	color:#b5b5b5;
}
.header h3 a:nth-child(3){
	display:inline-block;
	font-size:14px;
	text-indent:14px;
	width:70px;
	font-weight:100;
	color:#333;

}
.content{
	height:460px;
	text-align: left;
	width:100%;
	background:url(../assets/bg5.png) no-repeat;


}

.login,.login2,.login3{
	height:265px;
	display:none;
	width:282px;
	padding-top:50px;
	margin:0 auto;


}
.agains{
	display:none;
	height:35px;
	color:#fb4848;
	text-align:center;
}
.displayBlock{
	display:block;
}
.login h4,.login2 h4,.login3 h4{
	height:45px;

	font-size:20px;

}
.login3 .three3{
	height:235px;
	line-height:340px;
	text-align:center;
}
.username{
	height:36px;
	width:282px;
	padding-bottom:40px;

}
.username input{
	height:34px;
	width:280px;
	border:1px solid #aaa;
	text-indent:5px;
	background:#fff;
}

.passwords{
	height:35px;
	width:282px;
	margin-bottom:40px;
	overflow: auto; zoom: 1;
	border:1px solid #aaa;
}
.passwords input{
	height:35px;
	width:197px;
	border:0;
	text-indent:5px;
	background:#fff;
	float:left;
}
.passwords button{
	height:35px;
	width:85px;
	border:0;
	float:left;
	background:#75b6ff;
	color:#fff;
}
.entry{
	height:35px;
	margin-bottom:20px;
	text-align:center;
}
.entry button{
	height:35px;
	width:130px;
	color:#fff;
	background:#66afff;
	border:none;
}

.list{
	height:182px;
	margin:0 auto;
	width:1060px;
	overflow: auto; zoom: 1;

}
.list li{
	float:left;
	height:182px;
	width:163px;
	background:red;
	text-align:right;
	line-height:270px;

}
.list li:nth-child(1){
	background:url(../assets/three.png) no-repeat 101px 42px;
}
.list li:nth-child(2){
	background:url(../assets/four.png) no-repeat 101px 42px;

}
.list li:nth-child(3){
	background:url(../assets/five.png) no-repeat 101px 42px;

}
.list li:nth-child(4){
	background:url(../assets/six.png) no-repeat 101px 42px;

}
.list li:nth-child(5){
	background:url(../assets/two.png) no-repeat 101px 42px;

}
.list li:nth-child(6){
	background:url(../assets/one.png) no-repeat 101px 42px;

}

</style>
